import React from 'react';
import { connect } from 'dva';
import { Form, Input, Button, Icon } from 'antd';
import styles from './index.less';

const FormItem = Form.Item;
const create = Form.create;

function Login({ form, dispatch }) {
    const { getFieldDecorator: gfd, validateFields: vf } = form;
    const handleSubmit = (e) => {
        e.preventDefault();
        vf((err, val) => {
            if (err) {
                return;
            }
            login(val);
            return val;
        });
    };
    const userName = gfd('userName', {
        rules: [
            {
                required: true,
                message: '请输入用户名',
            },
        ],
    });
    const password = gfd('password', {
        rules: [
            {
                required: true,
                message: '请输入密码',
            },
        ],
    });
    const login = (payload) => {
        dispatch({
            type: 'app/login',
            payload,
        });
    };
    return (
        <div className={styles.login}>
            <h2>欢迎登录</h2>
            <Form onSubmit={handleSubmit}>
                <FormItem>
                    {userName(<Input addonBefore={<Icon type="user"/>} placeholder="请输入用户名"/>)}
                </FormItem>
                <FormItem>
                    {password(<Input type="password" addonBefore={<Icon type="lock"/>} placeholder="请输入密码"/>)}
                </FormItem>
                <FormItem>
                    <Button
                        type="primary"
                        htmlType="submit"
                        size="large"
                        className={styles.submit}
                    >
                        登录
                    </Button>
                </FormItem>
            </Form>
        </div>
    );
}

function mapStateToProps() {
    return {};
}

export default connect(mapStateToProps)(create()(Login));
